<template>
  <div>
    <div style="color: white; font-size: 16px">申报项目概况</div>
    <ul class="ulchart">
      <li>
        <div class="ulheader">三年滚动计划项目</div>
        <div class="showli">
          {{ data.three }}<span style="font-size: 12px">个</span>
        </div>
      </li>
      <li>
        <div class="ulheader">亿元五年规划项目</div>
        <div class="showli">
          {{ data.five }}<span style="font-size: 12px">个</span>
        </div>
      </li>
      <li>
        <div class="ulheader">总投资</div>
        <div class="showli">
          {{ data.summoney }}<span style="font-size: 12px">亿元</span>
        </div>
      </li>
    </ul>
    <div style="color: white; font-size: 16px">申报项目类型分布</div>
    <div id="classchart1"></div>
  </div>
</template>

<script>
export default {
  props: ["active"],
  data() {
    return {
      data: {
        three: "1500",
        five: "300",
        summoney: "3000",
      },
    };
  },
  methods: {
    draw() {
    //   console.log(this.$props);

      var echarts = require("echarts");
      var mychart = echarts.init(document.getElementById("classchart1"));

      var option = {
        color: ["#A0C8EE", "#49A5E7", "#83ADFF", "#D4FCFF", "#FFE88A"],
        tooltip: {
          trigger: "item",
          formatter: "{a}" + "</br>" + "{b}:" + "{d}%",
        },
        legend: {
          textStyle: {
            color: "white",
          },
          left: "left",
          orient: "vertical",
          top: "center",
        },
        series: [
          {
            name: "项目类型",
            type: "pie",
            radius: ["30%", "70%"],
            avoidLabelOverlap: false,
            left: "200",
            label: {
              normal: {
                formatter: "{d}%",
                show: true,
                position: "inside",
              },
            },

            labelLine: {
              show: true,
            },
            data: [
              { value: 1048, name: "建筑行业" },
              { value: 735, name: "教育行业" },
              { value: 580, name: "水利，环境，公共设施" },
              { value: 484, name: "农，林，牧，渔业" },
              { value: 300, name: "电力，燃气，能源" },
            ],
          },
        ],
      };

      mychart.setOption(option);

    },
  },
  watch: {},
  mounted() {
    this.draw();
  },
};
</script>

<style >
#classchart1{
  width: 100%;
  height: 270px;
}
</style>